<template>
  <v-container>
    <v-layout row>
      <v-btn icon :to="{ path: '/announcement/index' }">
        <v-icon x-large>arrow_back</v-icon>
      </v-btn>
      <v-layout column>
        <v-flex>
          <div class="title">{{announcement.title}}</div>
        </v-flex>
        <v-flex>
          <span>{{announcement.created_at | parseTime}}</span>
          <span class="mx-3 grey--text">{{$t('announcement.readTimes') + ':' + announcement.read_times}}</span>
          <span class="blue--text">{{announcement.author.username}}</span>
        </v-flex>
      </v-layout>
    </v-layout>

    <v-divider></v-divider>

    <v-layout class="ql-snow">
      <v-layout class="ql-editor">
        <v-flex class="ql-video" v-html="announcement.content"></v-flex>
      </v-layout>
    </v-layout>
  </v-container>
</template>

<script>
import { fetchAnnById } from '@/api/announcement'
export default {
  data: () => ({
    announcement: {
      icon: '',
      title: '',
      summary: '',
      content: '',
      author: {
        username: ''
      },
      created_at: '',
      read_times: 0
    }
  }),
  methods: {
    fetchAnnouncement() {
      fetchAnnById(this.$route.params.announcementId).then(res => {
        if (res.status === 200) {
          this.announcement = res.data
        }
      })
    }
  },
  created() {
    this.fetchAnnouncement()
  }
}
</script>

<style scoped>

</style>
